<template>
	<view class="">
		<!-- 首页头部 -->
		<header-top :homeStyle="homeStyle" :isCheckGoods="isCheckGoods" :isIndex="false" @switchTab="typeTab">
			<view class="index-header-r dis-flex flex-y-center flex-x-end" slot="right">
			  <view class="guanli" @tap="toNext">{{ifManage?'完成':'管理'}}</view>
			</view>
		</header-top>
		
		<!-- tab -->
		<view class="attention-tab-wrap">
			<view class="attention-tab dis-flex flex-y-center">
				<view :class="tabsOn==v.id?'on':''" v-for="v in tabs" :key="v.id" @tap="switchTab(v.id)">{{v.text}}</view>
			</view>
		</view>
		<view class="main">
			
			<!-- 商品列表 -->
			<view v-show="tabsOn==0" class="wrap30">
				<product-water ref="waterfall" :list="list.data" :ifManage="ifManage" @delete="delData"></product-water>
			</view>
			
			<!-- 种草列表 -->
			<view v-show="tabsOn==1" class="wrap30">
				<!-- 小商店 -->
				<wantBuy v-if="homeStyle=='minishop'" ref="wantBuy" :list="list1.data" :ifManage="ifManage" type="wantbuy" @delete="delData"></wantBuy>
				<!-- 默认模板 -->
				<want-to-buy v-else ref="wantToBuy" :list="list1.data" :ifManage="ifManage" type="wantbuy" @delete="delData"></want-to-buy>
			</view>
			
			<!-- 营销列表 -->
			<view v-show="tabsOn==2" class="bgf wrap30">
				<!-- 小商店 -->
				<marketing2 v-if="homeStyle=='minishop'" ref="marketing" :list="list2.data" :ifManage="ifManage" type="marketing" @delete="delData"></marketing2>
				<!-- 默认模板 -->
				<marketing v-else ref="marketing" :list="list2.data" :ifManage="ifManage" type="marketing" @delete="delData"></marketing>
			</view>
			
			<!--加载loadding-->
			<tui-loadmore v-if="loadding" :index="3" type="primary"></tui-loadmore>
			<tui-nomore v-if="(!pullUpOn&&list.data!=''&&tabsOn==0) || (page==list.last_page&&tabsOn==0&&list.data!='')||(!pullUpOn&& list1.data!=''&& tabsOn==1) || (page==list1.last_page&& tabsOn==1&&list1.data!='')||(!pullUpOn&&list2.data!=''&&tabsOn==2) || (page==list2.last_page&& tabsOn==2&&list2.data!='')" backgroundColor="#f8f8f8">
			</tui-nomore>
			<!-- 无数据 -->
			<tui-no-data imgUrl="http://pic.kaidanxia.com/2020-06-22/202006221449022b5c05125.png" :imgWidth="264" :imgHeight="264" v-if="(list.data=='' && tabsOn==0) ||(list1.data=='' && tabsOn==1) ||(list2.data=='' && tabsOn==2)">
				<view class="col-9">暂无数据</view>
			</tui-no-data>
			
		</view>
		<!--加载loadding-->
		
		<!-- 提示框 -->
		<tui-tips position="center" ref="toast"></tui-tips>
	</view>
</template>

<script>
	import headerTop from '../_header/index';
	import productWater from '@/components/waterfall/product-water.vue';
	import wantToBuy from '@/components/waterfall/want-to-buy/index';
	import marketing from '@/components/waterfall/marketing/index';
	import wantBuy from '@/components/waterfall/small_store/wantBuy/index';
	import marketing2 from '@/components/waterfall/small_store/marketing/index';
	
	const app = getApp().globalData;
	export default {
		components: {
			headerTop,
			productWater,
			wantToBuy,
			marketing,
			wantBuy,
			marketing2,
		},
		props:{
			isCheckGoods: false,//商家信息
			homeStyle: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				title: '',
				typeOn: 1,
				ifManage:false,//默认不显示多选框
				tabs:[{id:0,text:'商品'},{id:1,text:'种草'},{id:2,text:'社区'},],//tab
				tabsOn: 0,//默认第一个tab
				page: 1,
				keyword:'',//关键字
				
				list: '',//列表
				list1: '',//列表
				list2: '',//列表
				loadding: false,
				pullUpOn: true,
				checkList: [],//选中列表
			}
		},
		methods: {
			// 局部更新
			_show(){
				this.page = 1;
				this.getWantList(this.tabsOn);
			},
			//页面相关事件处理函数--监听用户下拉动作
			_onPullDownRefresh () {
				//延时为了看效果
				setTimeout(() => {
					this.list = [];
					this.list1 = [];
					this.list2 = [];
					this.page = 1;
					this.getWantList(this.tabsOn);
					this.pullUpOn = true;
					this.loadding = false;
					uni.stopPullDownRefresh();
					this.$api.msg("刷新成功")
				}, 200)
			},
			// 上拉加载下一页
			_onReachBottom () {
				let that = this;
				let last_page = that.tabsOn==0? that.list.last_page: that.tabsOn==1? that.list1.last_page : that.list2.last_page;
				
				if (!that.pullUpOn) return;
					that.loadding = true;
				if (that.page >= last_page) {
					that.loadding = false;
					that.pullUpOn = false
				} else {
					that.page = ++that.page;
					that.loadding = false
					that.getWantList(this.tabsOn);
				}
			},
			// 获取列表
			getWantList (tabsOn){
				let that = this;
				var obj = {
						keyword: that.keyword,
						page: that.page,
					}, 
						url = tabsOn==0? 'wxapp.goods/collections':tabsOn==1?'content.article.goods/collections':tabsOn==2? 'content.article.market/collections':'';
				app._get(url,obj,res => {
					let _list = that.list,
							data = tabsOn==0? res.data.wxappGoods: res.data;
						if(data.data!=''){
							data.data.forEach(item => {
								if(item.show_views>10000){
									item.show_views = (item.show_views-item.show_views%1000)/10000+'W';
								}
							})
						}
					if(that.page == 1){
						_list = data;
					}else{
						_list.data = _list.data.concat(data.data);
					}
					
					if(tabsOn == 0)	{
						that.list = _list;
					}else if(tabsOn == 1){
						that.list1 = _list;
					}else{
						that.list2 = _list;
					}
				});
				
			},
			// 批量删除取消收藏
			delData(ids,type){
				if(ids){
					let object_id = ids.toString();
					app._post_form('user.collection/del',{type: type,object_id: object_id}, res => {
						if(res.code==1){
							this.ifManage = !this.ifManage;
							this.$api.msg(res.msg);
							setTimeout(()=> {
								this.page = 1;
								this.getWantList(this.tabsOn);
								this.pullUpOn = true;
								this.loadding = false;
							},500)
						}else{
							this.$api.msg(res.msg);
						}
					});
				}else{
					this.$api.msg('你还没有选择哦');
				}
			},
			// 切换tab
			switchTab(id){
				let that = this;
				that.tabsOn = id;
				that.ifManage = false;
				let list = that.tabsOn==0? that.list: that.tabsOn==1? that.list1 : that.list2;
				if(list==''){
					that.page = 1;
					that.getWantList(that.tabsOn);
					that.pullUpOn = true;
					that.loadding = false;
				}else{
					that.page = list.current_page
				}
			},
			// 更新页面
			listChange(res){
				if(res){
					this.tabsOn = id;
					this.keyword= '';
					this.page = 1;
					this.getWantList(this.tabsOn);
					this.pullUpOn = true;
					this.loadding = false;
				}
			},
			// 切换tab
			typeTab(id){
				this.typeOn = id;
				this.$emit('typeTab',this.typeOn)
			},
			typeTab2(){
				uni.navigateTo({
					url: '/pages/retailShop/shopAbout/shopDetail/index?wxapp_id='+app.wxapp_id
				})
			},
			// 点击管理
			toNext() {
				this.ifManage = !this.ifManage;
			},
		}
	}
</script>

<style lang="scss">
	@import "attention.scss";
</style>
